<template>
	<div class="sn-common-container">
		<div class="prcoss-container">
			<header>
				<div class="sn-flex sn-row-center hidden-sm-and-down">
					<el-select v-model="searchShop"  placeholder="选择店铺"  filterable style="width: 160px;margin-right: 10px;" clearable  @change="currentChange(1)">
						<el-option v-for="item in shopList"
							:key="item.id"
							:label="item.name"
							:value="item.id">
						</el-option>
					</el-select>
					<el-input v-model="searchValue" placeholder="输入托码筛选" style="width: 150px;margin-right: 10px;" clearable
						@keyup.enter.native="currentChange(1)" />
					<el-select v-model="searchStatus" placeholder="是否装箱"  filterable style="width: 120px;margin-right: 10px;"  @change="statusChange()">
						<el-option :label="'全部'" :value="'all'"></el-option>
						<el-option :label="'未装箱'" :value="0"></el-option>
						<el-option :label="'已装箱'" :value="1"></el-option>
					</el-select>
					<el-select
						v-if="searchStatus===1"
						v-model="searchItem"
						filterable
						remote
						clearable
						reserve-keyword
						style="margin-right: 10px;"
						placeholder="请输入商品名称搜索"
						@change="currentChange(1)"
						:remote-method="remoteMethod"
						:loading="loading">
						<el-option
						v-for="item in itemList"
						:key="item.id"
						:label="item.name"
						:value="item.id">
						</el-option>
					</el-select>
					<el-date-picker v-model="BeginTime" v-if="searchStatus===1"  type="datetime" style="margin-right: 10px; width: 150px;" placeholder="开始时间"  @change="currentChange(1)"></el-date-picker>
					<el-date-picker v-model="EndTime" v-if="searchStatus===1" type="datetime" placeholder="结束时间" style="width: 150px;"  @change="currentChange(1)"></el-date-picker>
					<el-button class="sn-btn" style="margin-left: 10px" type="primary" icon="el-icon-search"
						@click="currentChange(1)">
						搜索
					</el-button>
					<el-button class="sn-btn" style="margin-left: 10px" type="primary" icon="el-icon-chenge"
						@click="openChangeShopDialog('all')">
						根据搜索条件批量修改
					</el-button>
				</div>
				<div class="hidden-sm-and-up">
					<el-input v-model="searchValue" placeholder="输入托码进行筛选" style="width: 200px" clearable
						@keyup.enter.native="currentChange(1)" />
					<el-button style="margin-left: 4px" type="primary" class="sn-btn" icon="el-icon-search"
						@click="currentChange(1)">
						搜索
					</el-button>
				</div>
			</header>
			<section> 
				<global-table :loading="tableLoading" style="margin-top: 20px;" :pageIndex="currentPage" :pageSize="pageSize" :headerData="initData"
					:data="tabelData" :isFullScreen="false" :operateW="200">
					<template #item="scope">
						<div class="sn-flex" v-if="scope.row.item">
							<img :src="scope.row.item.imageUrl" alt="" style="width: 50px;height:50px;margin-right: 10px;" />
							<p>
								<span>{{ scope.row.item.name }}</span> <br  />
								<span>{{ scope.row.item.specification }}</span>
							</p>
						</div>
						<div v-else>未关联商品</div>
					</template>
					<template #code="scope">
						<div v-if="scope.row.code">
							<span>{{ scope.row.code }}</span> <br  />
						<span class="sn-hover" @click="lookBollteCodeList(scope.row.bottleCodes)" style="color:#409EFF;"> 查看箱码详情</span>
						</div>
						<div v-else>未装托</div>
						
					</template>
					<template #palletCode="scope">
						<div v-if="scope.row.palletCode">
							<span>{{ scope.row.palletCode }}</span> <br  />
						<span class="sn-hover" @click="getPalletDetails(scope.row.palletCode)" style="color:#409EFF;"> 查看托码详情</span>
						</div>
						<div v-else>未装托</div>
						
					</template>
					<template #packingTime="scope">
						<span>{{$parseTime(scope.row.packingTime)}}</span>
					</template>
					
					<template #operate="scope">
						<el-button type="primary" size="mini" @click="openChangeShopDialog(scope.row.code)">修改绑定企业</el-button>
					</template>
				</global-table>
			</section>
			<footer style="margin-top: 10px;">
				<el-pagination @current-change="currentChange" :current-page.sync="currentPage" :page-size="pageSize"
					layout="total,prev, pager, next, jumper"  :pager-count="7" class="sn-pagination" hide-on-single-page
					style="text-align: center;" :total="totalNum" background>
					>
				</el-pagination>
			</footer>
		</div>
		 <!-- 订单详情 -->
		 <el-dialog :visible.sync="tradeDialog" append-to-body class="sn-default-dialog" width="560px" @close="tradeDialogClose()">
			<div class="sn-title" slot="title">修改关联企业</div>
			<div v-loading="tradeDetailsLoading">
				<div  class="sn-flex">
					<p>选择企业(不选企业会将箱码解绑):</p>
					<el-select v-model="newEnterpriseId"  placeholder="选择企业" clearable  filterable style="width: 200px;margin-left: 10px;">
						<el-option v-for="item in shopList"
							:key="item.id"
							:label="item.name"
							:value="item.id">
						</el-option>
					</el-select>
				</div>
				<p style="text-align:center;">
					<el-button type="primary" size="default" @click="changeShopFn()">保存</el-button>
					<el-button type="info" size="default" @click="tradeDialog=false">取消</el-button>
				</p>
			</div>
		</el-dialog>
		<el-dialog
		:visible.sync="bottleCodeDialog"
		class="sn-default-dialog"
		width="300px"
		>
		<div class="sn-title" slot="title">箱码详情</div>
		<div>
			<p v-for="item in bottleCodeList" :key="item">{{item}}</p>
		</div>
		</el-dialog>
	</div>
</template>

<script>
import GlobalTable from '@/components/GlobalTable';
import {SetBoxCodesEnterpriseBatch,SetBoxCodeEnterprise,GetBoxCodesPage,GetBoxCode} from '@/api/bottleCode';
import { GetItemsPage} from '@/api/itemList';
import {  GetEnterprisesByPage,GetEmployeeByPage} from '@/api/enterprise';
import { guid } from '@/utils'
export default {
	components: { GlobalTable },
	data() {
		return {
			tableLoading:false,
			tabelData: [],
			fillterSaleman:'',
			salemanList:[],
			initData: [
				{
					label: '企业名称',
					value: 'enterpriseName',
					id: guid(),
					width: 180,
				},
				{
					label: '商品',
					value: 'item',
					id: guid(),
					width: 300,
					isCustom:true
				},
				{
					label: '箱码',
					value: 'code',
					id: guid(),
					width: 120,
					isCustom:true
				},
				{
					label: '托码',
					value: 'palletCode',
					id: guid(),
					width:150,
					isCustom:true
				},
				{
					label: '装箱日期',
					value: 'packingTime',
					id: guid(),
					width: 200,
					isCustom:true
				},
			],
			currentPage: 1,
			pageSize: 10,
			totalNum: 0,
			searchValue: '',
			BeginTime:'',
			EndTime:'',
			tradeDetailsLoading:false,
			tradeDialog:false,
			tradeDetailsInfo:{},
			shopList:[],
			searchShop:'',
			chooseBoxCode:"",
			searchItem:'',
			itemList:[],
			loading:false,
			searchStatus:'all',
			newEnterpriseId:'',
			bottleCodeDialog:false,
		}
	},
	created() {
		this.getShopListFn();
		this.getDataListFn();
	},
	methods: {
		lookBollteCodeList(row){
			this.bottleCodeList = row;
			this.bottleCodeDialog = true;
		},
		async getPalletDetails(code){
			this.searchValue = code;
			this.currentChange(1);
		},
		statusChange(){
			if(this.searchStatus == 0){
				this.searchItem = '';
				this.BeginTime = '';
				this.EndTime = '';
			}
			this.currentChange(1);
		},
		async remoteMethod(query) {
			if (query !== '') {
				this.loading = true;
				const res = await GetItemsPage({
					Name:query,
					pageSize:999,
					pageIndex:1
				});
				this.loading = false;
				if(res.code === 200){
					this.itemList = res.data.list;
				}else{
					this.itemList = [];
				}
			} else {
				this.itemList = [];
			}
		},
		async getShopListFn() {
			this.tableLoading = true;
			let params = {
				pageIndex: 1,
				pageSize: 999,
			}
			try {
				const res = await GetEnterprisesByPage(params);
				this.tableLoading = false;
				if (res.code === 200) {
					this.shopList = res.data.list;
					this.searchShop = res.data.list[2].id;
					this.getSalemanListFn();
				} else {
					this.shopList = [];
					this.$message.error('获取店铺列表失败，错误信息：' + res.erroMessage);
				}
			} catch (error) {
				this.tableLoading = false;
			}
		},
			// 获取筛选的业务员列表
		async getSalemanListFn(){
			let params = {
				pageIndex: 1,
				pageSize: 999,
				EnterpriseId: this.searchShop,
			}
			let res = await GetEmployeeByPage(params);
			if(res.code === 200){
				this.salemanList = res.data.list;
			}else{
				this.$message.error('获取员工列表失败，错误信息：'+res.erroMessage)
			}
		},
		// 关闭详情弹窗
		tradeDialogClose(){
			this.tradeDetailsInfo = {};
		},
		// 打开订单详情弹窗
		async openChangeShopDialog(type){
			this.chooseBoxCode = type;
			this.tradeDialog = true;
		},
		async changeShopFn(){
			if(this.chooseBoxCode == 'all'){
				let params = {
					pageIndex: 1,
					pageSize: this.totalNum,
					EnterpriseId:this.searchShop,
					newEnterpriseId:this.newEnterpriseId
				}
				if(this.searchValue !==''){
					params.PalletCode = this.searchValue;
				}
				if(this.BeginTime) params.BeginDate = this.BeginTime;
				if(this.EndTime) params.EndDate = this.EndTime;
				if(this.searchItem !==''){
					params.ItemId = this.searchItem;
				}
				if(this.newEnterpriseId === ''){
					params.newEnterpriseId = null;
				}
				const res = await SetBoxCodesEnterpriseBatch(params);
				if(res.code === 200){
					this.$message.success('修改成功');
					this.tradeDialog = false;
					this.getDataListFn();
				}else{
					this.$message.error('修改失败，错误信息：'+res.erroMessage);
				}
			}else {
				let params = {
					boxCode:this.chooseBoxCode,
					newEnterpriseId:this.newEnterpriseId
				}
				if(this.newEnterpriseId === ''){
					params.newEnterpriseId = null;
				}
				const res = await SetBoxCodeEnterprise(params);
				if(res.code === 200){
					this.$message.success('修改成功');
					this.tradeDialog = false;
					this.getDataListFn();
				}else{
					this.$message.error('修改失败，错误信息：'+res.erroMessage);
				}
			}
		},
		currentChange(val) {
			this.currentPage = val;
			this.getDataListFn();
		},
		// 获取装箱记录列表
		async getDataListFn() {
			this.tableLoading = true;
			try {
				let params = {
					pageIndex: this.currentPage,
					pageSize: this.pageSize,
					EnterpriseId:this.searchShop,
				}
				if(this.searchValue !==''){
					params.PalletCode = this.searchValue;
				}
				if(this.BeginTime) params.BeginDate = this.BeginTime;
				if(this.EndTime) params.EndDate = this.EndTime;
				if(this.searchItem !==''){
					params.ItemId = this.searchItem;
				}
				if(this.searchStatus!=='all'){
					params.Packing = Boolean(this.searchStatus);
				}
				const res = await GetBoxCodesPage(params);
				this.tableLoading = false;
				if (res.code === 200) {
					this.tabelData = res.data.list;
					this.totalNum = res.data.totalCount;
				} else {
					this.tabelData = [];
					this.$message.error('获取箱码列表失败，错误信息：' + res.erroMessage);
				}
			} catch (error) {
				this.tableLoading = false;
				this.$message.error('请求箱码列表失败，错误信息：' + error);
			}
			
		},
	}
};
</script>
  
<style lang="scss" scoped>
.prcoss-container {
	box-sizing: border-box;
	padding: 20px;
	background-color: #fff;
}
</style>